body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: sans-serif;
    background-color: #f0f0f0;
    touch-action: manipulation; /* 禁用双击缩放等触摸手势 */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

h1 {
    color: #333;
}

#game-board {
    position: relative;
    width: 90vmin; /* 使用 vmin 确保在不同屏幕方向下适应 */
    height: 80vmin;
    margin: 20px auto;
    /* 背景可以稍后添加 */
}

.hexagon {
    position: absolute;
    width: 8vmin; /* 调整大小以适应棋盘 */
    /* height: calc(8vmin / sqrt(3) * 2); */ /* 更精确的计算 pointy-top 高度 */
    height: calc(8vmin * 1.1547); /* 使用近似值，避免 calc 不支持 sqrt */
    background-color: #ffd700; /* 黄色 */
    /* 标准 pointy-top 六边形 clip-path */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-sizing: border-box; /* 包含边框和内边距 */
}

.hexagon.disabled {
    background-color: #ccc; /* 不可用格子颜色 */
    cursor: not-allowed;
}

.hexagon.police {
    /* background-color: #4682b4; */ /* 移除背景色 */
    background-image: url('polic.jpg'); /* 使用警察图片 */
    background-size: cover; /* 缩放图片以适应容器 */
    background-repeat: no-repeat; /* 不重复图片 */
    background-position: center; /* 图片居中显示 */
    /* background-repeat: no-repeat; */
    /* background-position: center; */
}

.hexagon.thief {
    /* background-color: #ff4500; */ /* 移除背景色 */
    background-image: url('thief.jpg'); /* 使用小偷图片 */
    background-size: cover; /* 缩放图片以适应容器 */
    background-repeat: no-repeat; /* 不重复图片 */
    background-position: center; /* 图片居中显示 */
    /* background-repeat: no-repeat; */
    /* background-position: center; */
}

.hexagon:hover:not(.disabled):not(.police):not(.thief) {
    background-color: #eee; /* 鼠标悬停效果 */
}


#message {
    margin-top: 10px;
    font-size: 1.2em;
    color: #d9534f; /* 红色，用于显示游戏结果 */
    min-height: 1.5em; /* 避免布局跳动 */
}

#reset-button {
    margin-top: 15px;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
}

/* 简单的媒体查询，用于调整小屏幕下的布局 */
@media (max-width: 600px) {
    #game-board {
        width: 95vmin;
        height: 85vmin;

#game-overlay {
    position: fixed; /* 固定定位，覆盖整个视口 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* 初始透明 */
    display: none; /* 初始隐藏 */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* 确保在最上层 */
    pointer-events: none; /* 不阻挡下方元素交互 */
    /* transition: background-color 0.5s ease; */ /* 移除，可能干扰 animation */
    transition: background-color 0.5s ease;
}

#game-overlay.visible {
    display: flex; /* 结束时显示 */
    pointer-events: auto; /* 结束时可交互 (如果需要显示文字等) */
    background-color: rgba(0, 0, 255, 0.3); /* 临时添加蓝色背景用于测试 */
}

/* 失败 - 红光闪烁动画 */
@keyframes game-lost-flash {
    0%, 100% { background-color: rgba(255, 0, 0, 0.5); }
    50% { background-color: rgba(255, 0, 0, 0.1); }
}

#game-overlay.game-lost {
    /* animation: game-lost-flash 0.5s infinite; */ /* 暂时注释掉动画 */
}

/* 成功 - 简单金色闪烁 (模拟烟花) */
@keyframes game-won-effect {
    0%, 100% { background-color: rgba(255, 215, 0, 0.6); box-shadow: 0 0 30px 20px rgba(255, 215, 0, 0.5); }
    50% { background-color: rgba(255, 215, 0, 0.2); box-shadow: 0 0 15px 10px rgba(255, 215, 0, 0.3); }
}

#game-overlay.game-won {
    /* animation: game-won-effect 0.8s ease-out; */ /* 暂时注释掉动画 */
    /* 可以添加更复杂的烟花效果，例如使用伪元素或 JS 库 */
}
    }
    .hexagon {
        width: 10vmin;
        height: 11.5vmin;
    }
}